<script setup lang="ts">
import {reactive, ref} from "vue";
import {studentVisit} from "@/api/student";
import {ElMessage} from "element-plus";
import {visitorTime} from "@/api/student";

let formRef = ref('')
let props = defineProps({
  visitData: Array
})
let emit = defineEmits(['submitVisit'])
import {useRoute} from "vue-router";

const route = useRoute()
let show = ref(false)
let loading = ref(false)
let visitForm = reactive({
  desc: '',
  student_id: '',
})

let visitTimeForm = reactive({
  next_visit_time: '',
  student_id: route.query.student_id,
})

let visitTime = reactive({showTime: false})
const handleSubmit = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      let data = visitForm
      data.student_id = route.query.student_id
      loading.value = true
      let res = await studentVisit(data);
      loading.value = false
      if (res) {
        ElMessage({type: 'success', message: '添加成功'})
        formRef.value.resetFields()
        emit('submitVisit')
      }
    } else {
      return false
    }
  })
}

const changeVisitDate = async () => {
  let res = await visitorTime(visitTimeForm)
  if (res) {
    ElMessage({type: 'success', message: '修改成功'})
    visitTime.showTime = !visitTimeForm.next_visit_time
  }
}


defineExpose({visitTimeForm, visitTime})
</script>

<template>
  <el-form label-width="85px" ref="formRef" :model="visitForm">
    <el-row justify="center">
      <el-col :lg="22" :xl="19" :xs="24" :md="24" :sm="24" class="box-wrap">
        <el-row style="flex-direction: column;">
          <el-col :span="24">
            <div class="student-label">回访信息</div>
          </el-col>
          <el-col v-for="(item ,index) in visitData" :xs="24" :lg="18" :md="18">
            <el-form-item v-if="index < 2" :label="item.teacher_name +'-'+ item.created_time" label-width="210px"
                          style="margin-bottom:10px">
              {{ item.content }}
            </el-form-item>
          </el-col>
          <el-collapse-transition>
            <el-row v-if="show">
              <template v-for="(item ,index) in visitData">
                <el-col :xs="24" :lg="18" :md="18" v-if="index >= 2">
                  <el-form-item :label="item.teacher_name +'-'+ item.created_time" label-width="210px"
                                style="margin-bottom:10px">
                    {{ item.content }}
                  </el-form-item>
                </el-col>
              </template>
            </el-row>
          </el-collapse-transition>
          <el-col :xs="24" :lg="20" :md="20">
            <el-form-item v-if="visitData.length>=2">
              <span style="color: #409EFF;cursor: pointer" @click="show = !show">{{ show ? '收起' : '展开更多' }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="24">
            <el-col :lg="10" :md="24" :xs="24">
              <el-form-item label="回访信息:" prop="desc" :rules="[{ required: true, message: '请输入回访信息'},]"
              >
                <el-input placeholder="请输入回访信息" :rows="5" type="textarea" v-model="visitForm.desc"/>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :lg="22" :xs="24" :md="24" :sm="24">
            <el-form-item prop="teacher">
              <el-button type="primary" @click="handleSubmit" :loading="loading">提交回访信息</el-button>
            </el-form-item>
          </el-col>
          <el-col :lg="5" :xs="24" :md="7">
            <el-form-item label="回访时间:">
              <el-date-picker v-if="visitTime.showTime"
                              v-model="visitTimeForm.next_visit_time"
                              @change="changeVisitDate"
                              style="width: 100%;"
                              type="datetime"
                              placeholder="请选择下次回访时间" format="YYYY-MM-DD HH:mm"
                              value-format="YYYY-MM-DD HH:mm"/>
              <span v-else style="color: red" @click="visitTime.showTime=true">{{
                  visitTimeForm.next_visit_time
                }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-form>

</template>

<style scoped lang="less">
@import "../index.less";
</style>